import React from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { json } from '@codemirror/lang-json';
import { oneDark } from '@codemirror/theme-one-dark';
import './index.less'

interface SourceViewProps {
    data: any;
    readOnly?: boolean;
}
interface SourceViewStyles {
    container: React.CSSProperties;
}

const styles: SourceViewStyles = {
    container: {
        height: '100%',
        width: '100%',
        border: '1px solid #d9d9d9',
        borderRadius: '4px',
        overflow: 'hidden',
        backgroundColor: '#282c34',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
    }
};

const SourceView: React.FC<SourceViewProps> = ({ data, readOnly = true }) => {
    const jsonString = JSON.stringify(data, null, 2);

    return (
        <div className='source-view' style={styles.container}>
            <CodeMirror
                value={jsonString}
                height="100%"
                theme={oneDark}
                extensions={[json()]}
                readOnly={readOnly}
                basicSetup={{
                    lineNumbers: true,
                    highlightActiveLineGutter: true,
                    highlightSpecialChars: true,
                    foldGutter: true,
                    drawSelection: true,
                    dropCursor: true,
                    allowMultipleSelections: true,
                    indentOnInput: true,
                    syntaxHighlighting: true,
                    bracketMatching: true,
                    closeBrackets: true,
                    autocompletion: true,
                    rectangularSelection: true,
                    crosshairCursor: true,
                    highlightActiveLine: true,
                    highlightSelectionMatches: true,
                    closeBracketsKeymap: true,
                    searchKeymap: true,
                    foldKeymap: true,
                    completionKeymap: true,
                    lintKeymap: true,
                }}
            />
        </div>
    );
};

export default SourceView; 